<template>
  <van-nav-bar title="邮箱认证" left-arrow fixed @click-left="onBack" />

  <div class="clear"></div>
  <div class="h50"></div>
  <div class="clear"></div>
  <div class="user">
    <div class="user-image">
      <img :src="LoginAuth.avatar_cdn" alt="" />
    </div>
  </div>

  <div class="form">
    <van-form>
      <van-field
        readonly
        v-model="LoginAuth.email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
        label-align="right"
        label-width="4.5em"
        colon
      />

      <van-field
        clearable
        label="验证码"
        name="code"
        placeholder="请输入邮箱验证码"
        v-model="code"
        label-align="right"
        label-width="4.5em"
        colon
      >
        <template #button>
          <van-button size="small" type="primary" @click="onSent"
            >获取验证码</van-button
          >
        </template>
      </van-field>
    </van-form>

    <div style="margin: 16px">
      <van-button round block type="primary" @click="onValidate">
        验证
      </van-button>
    </div>
  </div>

  <!-- <form method="post">
    <div class="item">
      <div class="title">邮箱：</div>
      <input
        readonly
        type="email"
        name="email"
        placeholder="请输入邮箱"
        v-model="LoginAuth.email"
      />
    </div>
    <div class="item">
      <div class="title">验证码：</div>
      <input
        type="text"
        name="code"
        placeholder="请输入验证码"
        v-model="code"
      />

      <button type="button" id="btn" @click="onSent">发送验证码</button>
    </div>
    <button id="button" @click="onValidate">验证</button>
  </form> -->
</template>

<script>
import { showNotify } from "vant";
export default {
  data() {
    return {
      code: "",
    };
  },
  created() {
    this.LoginAuth = this.$cookies.get("LoginAuth")
      ? this.$cookies.get("LoginAuth")
      : {};
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    async onSent() {
      let LoginAuth = this.LoginAuth;

      // console.log(LoginAuth);

      let result = await this.$api.send(LoginAuth);

      // console.log(result);

      if (result.code === 1) {
        showNotify({
          type: "success",
          message: result.msg,
        });

        return false;
      } else {
        showNotify({
          type: "warning",
          message: result.msg,
        });

        return false;
      }
    },
    async onValidate(event) {
      event.preventDefault();

      let LoginAuth = this.LoginAuth["id"];
      let code = this.code;

      let data = {
        id: LoginAuth,
        code,
      };

      // console.log(data);

      let result = await this.$api.emailAuth(data);
      // console.log(result);

      if (result.code === 1) {
        showNotify({
          type: "success",
          message: result.msg,
          onClose: () => {
            this.$router.push("/business/base/index");
          },
        });

        // return false;
      } else {
        showNotify({
          type: "warning",
          message: result.msg,
        });
        return false;
      }
    },
  },
};
</script>

<style>
@import url("/assets/css/profile.css");
</style>

